// webpack配置写在这里
//导入node内置的path模块，用来拼接路路径
const path = require("path");
// 导入编译模板页面
const HtmlWebpackPlugin = require("html-webpack-plugin");

console.log(path);
// 配置webpack五大核心并导出
module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//将文件导出到哪个路径绝对路径
        filename: 'bundle.js'//导出文件名字，
    },
    module: {
        //配置loader
        rules: [
            {
                // 处理cssloader
                test: /\.css$/, // 正则表达式匹配css文件
                // 遇到了css文件就交给如果下的loader处理
                use: ["style-loader", "css-loader"],
            },
            {
                // 处理图片的loader
                test: /\.(png|jpg|gif)$/i, // 正则匹配图片
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 819200,
                            outputPath: "image",
                        },
                    },
                ],
            },
            //   处理MP3文件
            {
                test: /\.(mp3|wav|wma|ape|aac)$/i,
                use: ['file-loader']
            },
            //  处理img标签的图片
            {
                test: /\.(htm|html)$/i,
                use: ['html-withimg-loader']
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            //配置被打包的目标模板文件,在目录下自动生成index.html文件并自动导入dist目录的js文件
            template: path.resolve("./index.html")
        })
    ],
    mode: 'development',//开发模式
    devServer: {
        host: "127.0.0.1", // 主机域名地址
        port: "12345",
        open: true, // 自动开启浏览器
        compress: true, // 对网络请求文件进行压缩处理
    },
}